<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>诊后随访-Demo展示，桃子同学的个人空间</title>
    <link rel="icon" href="/public/images/index/about/favicon.ico">
    <link rel="stylesheet" href="//fonts.useso.com/css?family=Roboto:300,400,500,700">
    <link rel="stylesheet" href="//fonts.useso.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap-material-design/0.5.9/css/bootstrap-material-design.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap-material-design/0.5.9/css/ripples.min.css">
    <link rel="stylesheet" href="/public/styles/base.css">
    <style>
        html {
            font-family: sans-serif;
            -ms-text-size-adjust: 100%;
            -webkit-text-size-adjust: 100%
        }

        body {
            margin: 0
        }

        article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
            display: block
        }

        audio, canvas, progress, video {
            display: inline-block;
            vertical-align: baseline
        }

        audio:not([controls]) {
            display: none;
            height: 0
        }

        [hidden], template {
            display: none
        }

        a {
            background: transparent
        }

        a:active, a:hover {
            outline: 0
        }

        abbr[title] {
            border-bottom: 1px dotted
        }

        b, strong {
            font-weight: 700
        }

        dfn {
            font-style: italic
        }

        h1 {
            font-size: 2em;
            margin: .67em 0
        }

        mark {
            background: #ff0;
            color: #000
        }

        small {
            font-size: 80%
        }

        sub, sup {
            font-size: 75%;
            line-height: 0;
            position: relative;
            vertical-align: baseline
        }

        sup {
            top: -.5em
        }

        sub {
            bottom: -.25em
        }

        img {
            border: 0
        }

        svg:not(:root) {
            overflow: hidden
        }

        figure {
            margin: 1em 40px
        }

        hr {
            box-sizing: content-box;
            height: 0
        }

        pre {
            overflow: auto
        }

        code, kbd, pre, samp {
            font-family: monospace;
            font-size: 1em
        }

        button, input, optgroup, select, textarea {
            color: inherit;
            font: inherit;
            margin: 0
        }

        button {
            overflow: visible
        }

        button, select {
            text-transform: none
        }

        button, html input[type=button], input[type=reset], input[type=submit] {
            -webkit-appearance: button;
            cursor: pointer
        }

        button[disabled], html input[disabled] {
            cursor: default
        }

        button::-moz-focus-inner, input::-moz-focus-inner {
            border: 0;
            padding: 0
        }

        input {
            line-height: normal
        }

        input[type=checkbox], input[type=radio] {
            box-sizing: border-box;
            padding: 0
        }

        input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
            height: auto
        }

        input[type=search] {
            -webkit-appearance: textfield;
            box-sizing: content-box
        }

        input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
            -webkit-appearance: none
        }

        fieldset {
            border: 1px solid silver;
            margin: 0 2px;
            padding: .35em .625em .75em
        }

        legend {
            border: 0;
            padding: 0
        }

        textarea {
            overflow: auto
        }

        optgroup {
            font-weight: 700
        }

        table {
            border-collapse: collapse;
            border-spacing: 0
        }

        td, th {
            padding: 0
        }

        i {
            display: inline-block
        }

        li, ul {
            padding: 0
        }

        li {
            list-style: none
        }

        a:focus, a:hover {
            text-decoration: none
        }

        html {
            min-width: 300px;
            overflow-x: auto
        }

        .navbar.navbar-inverse {
            background-color: #03a9f4;
            margin-bottom: 0;
            position: fixed;
            z-index: 10;
            width: 100%;
            min-width: 300px;
            top: 0;
            left: 0
        }

        .menu-toogle-btn {
            float: left;
            display: none
        }

        .body-cover {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            z-index: 8;
            top: 0;
            left: 0;
            display: none
        }

        .logo-box {
            float: left;
            height: 60px;
            line-height: 60px;
            margin-right: 5px;
            padding: 9px 0 0 2px
        }

        .header-logo {
            background-image: url(/public/images/index/demo/demo_08/logo.png);
            width: 33px;
            height: 26px;
            background-size: 100%;
            background-repeat: no-repeat
        }

        .header-title {
            font-size: 22px;
            float: left;
            height: 60px;
            margin: 0;
            line-height: 60px
        }

        .header-left {
            float: left;
            margin-left: 0 !important
        }

        .header-right-list {
            float: right;
            margin-bottom: 0;
            padding-left: 0
        }

        .header-right-list .header-right-item {
            float: left;
            line-height: 60px;
            height: 60px;
            position: relative
        }

        .header-right-list .header-right-item .dropdown-toggle {
            margin: 0 15px;
            height: 100%;
            display: block
        }

        .header-right-list .header-right-item .dropdown-toggle i {
            color: #fff
        }

        .header-right-list .header-right-item .dropdown-menu {
            position: absolute;
            right: 0;
            left: auto
        }

        .header-menu li a {
            text-align: center
        }

        .header-menu li span {
            font-size: 14px;
            margin-left: 5px
        }

        .navbar .user-info {
            width: 290px;
            padding: 5px 5px 0
        }

        .navbar .user-info .face-box {
            float: left;
            width: 40px;
            height: 40px;
            overflow: hidden;
            border-radius: 50%;
            margin-top: 10px
        }

        .navbar .user-info .face {
            width: 100%;
            height: 100%;
            vertical-align: baseline
        }

        .navbar .user-info .info {
            float: left;
            color: #000;
            width: 240px;
            line-height: 12px;
            padding-left: 10px;
            padding-top: 5px
        }

        .navbar .user-info .info .address {
            color: #aeaeae;
            font-size: 12px
        }

        @media (max-width: 1199px) {
            .header-title {
                font-size: 20px
            }

            .header-right-list .header-right-item, .header-title, .logo-box {
                height: 50px;
                line-height: 50px
            }
        }

        @media (max-width: 480px) {
            .menu-toogle-btn {
                display: block
            }

            .header-left {
                position: absolute;
                left: 0;
                right: 0;
                margin: auto !important;
                width: 95px
            }

            .header-left .logo-box {
                display: none
            }

            .header-left .header-title {
                font-size: 15px;
                width: 100%;
                text-align: center
            }

            .logo-box {
                padding-left: 3px;
                padding-top: 3px
            }

            .header-logo {
                width: 25px;
                height: 18px
            }

            .header-right-list .header-right-item .dropdown-toggle {
                margin: 0 5px
            }
        }

        .left-menu-box {
            display: block;
            width: 180px;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            -webkit-transition: width .2s ease, left .2s ease;
            transition: width .2s ease, left .2s ease;
            z-index: 9
        }

        .left-menu-box .inner {
            width: 100%;
            top: 60px;
            left: 0;
            position: absolute;
            bottom: 0;
            background: #eee
        }

        .left-menu-box .menu-list {
            width: 100%;
            margin: 0
        }

        .left-menu-box .menu-list a.btn {
            padding: 15px 0;
            box-shadow: none !important;
            border-radius: 0 !important
        }

        .left-menu-box .menu-list a.btn i {
            margin-right: 20px;
            -webkit-transition: margin .2s ease;
            transition: margin .2s ease
        }

        .left-menu-box .menu-list a.btn span {
            width: 60px;
            height: 24px;
            overflow: hidden;
            text-align: left;
            display: inline-block;
            vertical-align: middle;
            line-height: 24px
        }

        .left-menu-box .menu-list a.active {
            background: #dadada !important
        }

        .category-btn.active i {
            margin-right: 75px !important
        }

        .left-menu-box.active {
            left: 0
        }

        .body-box {
            margin-left: 180px;
            -webkit-transition: margin-left .2s ease;
            transition: margin-left .2s ease;
            margin-top: 61px
        }

        .categories-box {
            padding: 0 10px 0 0;
            height: 0;
            overflow: hidden;
            border-left: 1px solid #ccc;
            margin-left: 20px
        }

        .categories-box a {
            color: #555;
            display: block;
            padding: 5px 0;
            position: relative;
            width: 100%;
            height: 35px;
            overflow: hidden;
            line-height: 35px
        }

        .categories-box a:before {
            content: '';
            width: 10px;
            height: 1px;
            display: inline-block;
            background: #ccc;
            vertical-align: middle;
            margin-right: 5px
        }

        .categories-box a.focus, .categories-box a:hover {
            color: #03a9f4
        }

        .categories-box.active {
            height: auto
        }

        @media (max-width: 1199px) {
            .left-menu-box .inner {
                top: 50px
            }

            .body-box {
                margin-top: 50px
            }
        }

        @media (max-width: 768px) {
            .left-menu-box .inner {
                top: 50px
            }
        }

        @media (max-width: 480px) {
            .left-menu-box {
                left: -180px
            }

            .body-box {
                margin-left: 0
            }
        }

        .outer {
            position: relative
        }

        .fu-list-box {
            max-width: 965px;
            width: 90%;
            margin: 0 auto
        }

        .fu-list-box h5.title {
            margin: 0 24px;
            line-height: 35px;
            font-size: 15px;
            color: #999
        }

        .fu-list-box .fu-list {
            background-color: #fff;
            box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .188235)
        }

        .fu-list-box .fu-item {
            overflow: hidden;
            padding: 10px 20px
        }

        .fu-list-box .fu-item .fu-item-link {
            display: block;
            overflow: hidden
        }

        .fu-list-box .fu-item .info-box {
            float: left
        }

        .fu-list-box .fu-item .info-box .face {
            float: left;
            width: 40px;
            height: 40px;
            overflow: hidden;
            border-radius: 50%;
            margin-top: 10px
        }

        .fu-list-box .fu-item .info-box .face img {
            width: 100%;
            height: 100%
        }

        .fu-list-box .fu-item .info-box .name-box {
            float: left;
            line-height: 10px;
            margin: 15px 0 0 10px
        }

        .fu-list-box .fu-item .info-box .name {
            color: #000;
            margin:0 0 10px;
        }

        .fu-list-box .fu-item .info-box .type {
            color: #888
        }

        .fu-list-box .fu-item .time-box {
            float: right;
            margin-top: 8px
        }

        .fu-list-box .fu-item .time-box .date {
            color: #fe9800;
            font-size: 12px;
            margin-bottom: 5px
        }

        .fu-list-box .fu-item .time-box .after-treat {
            color: #2095f2;
            margin-bottom: 0
        }

        .fu-list-box .check-more {
            display: block;
            text-align: center;
            color: #03a9f4;
            margin: 10px auto;
            padding: 10px;
            width: 140px
        }

        .fu-list-box .loading {
            color: #666;
            font-size: 24px;
            -webkit-animation: loading .9s linear infinite;
            animation: loading .9s linear infinite
        }

        @-webkit-keyframes loading {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }
            to {
                -webkit-transform: rotate(1turn);
                transform: rotate(1turn)
            }
        }

        @keyframes loading {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg)
            }
            to {
                -webkit-transform: rotate(1turn);
                transform: rotate(1turn)
            }
        }

        .operate-cover {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            z-index: 12;
            top: 0;
            left: 0;
            display: none
        }

        .operate-box {
            width: 60px;
            height: 60px;
            position: fixed;
            right: 20px;
            bottom: 20px;
            z-index: 13
        }

        .operate-box .main-btn {
            color: #fff;
            background-color: #db4437;
            width: 60px;
            height: 60px;
            text-align: center;
            display: block;
            line-height: 60px;
            border-radius: 50%;
            box-shadow: 2px 0 10px #939393, 0 2px 10px #939393;
            z-index: 14;
            position: relative
        }

        .operate-box .alert-btn {
            width: 40px;
            height: 40px;
            background-color: #000;
            color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 40px;
            z-index: 13;
            opacity: 0;
            -webkit-transition: all .2s ease;
            transition: all .2s ease
        }

        .operate-box.active .alert-btn {
            opacity: 1
        }

        .operate-box.active .a1 {
            -webkit-transform: translate(-10px, -60px) rotate(1turn);
            transform: translate(-10px, -60px) rotate(1turn)
        }

        .operate-box.active .a2 {
            -webkit-transform: translate(-60px, -10px) rotate(1turn);
            transform: translate(-60px, -10px) rotate(1turn)
        }

        #addFollowModal {
            padding: 0
        }

        #addFollowModal .modal-header {
            background: #333;
            color: #fff;
            padding-top: 12px;
            padding-bottom: 12px
        }

        #addFollowModal .modal-header .close {
            color: #fff;
            opacity: 1;
            margin-top: -5px;
            font-size: 22px;
            padding: 7px 10px;
            margin-right: -15px
        }

        #addFollowModal .modal-body .form-group {
            margin-top: 10px
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="body-cover"></div>
    <div class="navbar navbar-inverse">
        <div class="container-fluid">
            <button type="button" class="navbar-toggle menu-toogle-btn" id="toggleMenu">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-header header-left">
                <a class="logo-box" href="javascript:;"><i class="header-logo"></i></a>
                <h3 class="header-title">诊后随访</h3>
            </div>
            <ul class="header-right-list">
                <li class="header-right-item">
                    <a href="javascript:;" data-target="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="material-icons">apps</i>
                    </a>
                    <ul class="dropdown-menu header-menu">
                        <li><a href="javascript:;"><i class="material-icons">assignment</i><span>随访管理</span></a>
                        </li>
                        <li><a href="javascript:;"><i class="material-icons">date_range</i><span>手术预约</span></a>
                        </li>
                    </ul>
                </li>
                <li class="header-right-item">
                    <a href="javascript:;" data-target="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="material-icons">person</i>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="user-info">
                            <div class="face-box">
                                <img src="http://placeholder.duapp.com/40/40" alt="" class="face">
                            </div>
                            <div class="info">
                                <p class="name">陈太忠</p>
                                <p class="job">副主任医师</p>
                                <p class="address">四川大学华西医院第二附属医院，心内科</p>
                            </div>
                        </li>
                        <li class="divider"></li>
                        <li><a href="javascript:;">退出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
    <div class="left-menu-box">
        <div class="inner">
            <div class="menu-list btn-group-vertical">
                <a href="javascript:;" class="btn btn-raised" data-path="going"><i class="material-icons">format_list_bulleted</i><span>进行中</span></a>
                <a href="javascript:;" class="btn btn-raised" data-path="done"><i
                        class="material-icons">check</i><span>已完成</span></a>
                <a href="javascript:;" class="btn btn-raised" data-path="setting"><i class="material-icons">settings</i><span>项目设置</span></a>
                <a href="javascript:;" class="btn btn-raised category-btn"><i class="material-icons">computer</i><span>类型分类</span></a>
                <div class="categories-box">
                    <a href="javascript:;" class="focus">鼾症术后评估</a>
                    <a href="javascript:;">鼾症术后评估鼾症术后评估鼾症术后评估鼾症术后评估</a>
                    <a href="javascript:;">鼾症术后评估</a>
                </div>
                <a href="javascript:;" class="btn btn-raised category-btn"><i
                        class="material-icons">local_hospital</i><span>医院分类</span></a>
                <div class="categories-box">
                    <a href="javascript:;">四川大学华西医院</a>
                    <a href="javascript:;">四川省人民医院</a>
                    <a href="javascript:;">成都市第一人民医院</a>
                    <a href="javascript:;">成都市第二人民医院</a>
                    <a href="javascript:;">成都市第三人民医院</a>
                </div>
                <a href="javascript:;" class="btn btn-raised category-btn"><i
                        class="material-icons">face</i><span>医生分类</span></a>
                <div class="categories-box">
                    <a href="javascript:;">赖玉田</a>
                    <a href="javascript:;">邵国立</a>
                    <a href="javascript:;">韦明河</a>
                    <a href="javascript:;">孙立新</a>
                </div>
            </div>
        </div>
    </div>
    <div class="body-box">
        <div class="fu-list-box">
            <h5 class="title">今天</h5>
            <ul class="fu-list">
                <li class="fu-item">
                    <a href="javascript:;" class="fu-item-link">
                        <div class="info-box">
                            <div class="face">
                                <img src="http://placeholder.duapp.com/40/40">
                            </div>
                            <div class="name-box">
                                <p class="name">任娇</p>
                                <p class="type">鼾症术后评估</p>
                            </div>
                        </div>
                        <div class="time-box">
                            <p class="date">今天</p>
                            <p class="after-treat">治疗后3周</p>
                        </div>
                    </a>
                </li>
                <li class="fu-item">
                    <a href="javascript:;" class="fu-item-link">
                        <div class="info-box">
                            <div class="face">
                                <img src="http://placeholder.duapp.com/40/40">
                            </div>
                            <div class="name-box">
                                <p class="name">任娇</p>
                                <p class="type">鼾症术后评估</p>
                            </div>
                        </div>
                        <div class="time-box">
                            <p class="date">今天</p>
                            <p class="after-treat">治疗后3周</p>
                        </div>
                    </a>
                </li>
            </ul>
            <h5 class="title">未来七天</h5>
            <ul class="fu-list" id="moreListBox">
                <li class="fu-item">
                    <a href="javascript:;" class="fu-item-link">
                        <div class="info-box">
                            <div class="face">
                                <img src="http://placeholder.duapp.com/40/40">
                            </div>
                            <div class="name-box">
                                <p class="name">任娇</p>
                                <p class="type">鼾症术后评估</p>
                            </div>
                        </div>
                        <div class="time-box">
                            <p class="date">今天</p>
                            <p class="after-treat">治疗后3周</p>
                        </div>
                    </a>
                </li>
                <li class="fu-item">
                    <a href="javascript:;" class="fu-item-link">
                        <div class="info-box">
                            <div class="face">
                                <img src="http://placeholder.duapp.com/40/40">
                            </div>
                            <div class="name-box">
                                <p class="name">任娇</p>
                                <p class="type">鼾症术后评估</p>
                            </div>
                        </div>
                        <div class="time-box">
                            <p class="date">今天</p>
                            <p class="after-treat">治疗后3周</p>
                        </div>
                    </a>
                </li>
            </ul>
            <a href="javascript:;" class="check-more" data-loading="false">查看更多随访计划</a>
        </div>
        <div class="operate-cover"></div>
        <div class="operate-box">
            <a href="javascript:;" class="main-btn"><i class="material-icons">settings</i></a>
            <a href="javascript:;" class="alert-btn a1" title="新建随访计划" id="addFollowPlan"><i
                    class="material-icons">add</i></a>
            <a href="javascript:;" class="alert-btn a2"><i class="material-icons">mode_edit</i></a>
        </div>
        <div class="modal fade" id="addFollowModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title">新建随访计划</h4>
                    </div>
                    <div class="modal-body">
                        <p>
                        <form class="form-horizontal">
                            <div class="form-group is-empty">
                                <label for="inputEmail" class="col-md-2 control-label">患者手机</label>
                                <div class="col-md-10">
                                    <input type="number" class="form-control" id="inputEmail">
                                </div>
                                <span class="material-input"></span><span class="material-input"></span>
                            </div>
                            <div class="form-group is-empty">
                                <label for="inputPassword" class="col-md-2 control-label">患者姓名</label>
                                <div class="col-md-10">
                                    <input type="text" class="form-control" id="inputPassword" maxlength="10">
                                </div>
                                <span class="material-input"></span><span class="material-input"></span>
                            </div>
                            <div class="form-group">
                                <label for="select111" class="col-md-2 control-label">随访模板</label>
                                <div class="col-md-10">
                                    <select id="select111" class="form-control">
                                        <option>肺癌患者疼痛管理随访</option>
                                        <option>肺癌患者围手术期高危因素评估及肺康复临床资料分析</option>
                                        <option>胸外科围手术期LCQ咳嗽研究</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="selectTime" class="col-md-2 control-label">开始时间</label>
                                <div class="col-md-10">
                                    <input type="date" class="form-control" data-date-format="yyyy-mm-dd"
                                           id="selectTime">
                                </div>
                            </div>
                        </form>
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-raised btn-danger" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-raised btn-success">完成</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-material-design/0.5.9/js/material.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap-material-design/0.5.9/js/ripples.min.js"></script>
<script src="/public/scripts/base.js"></script>

<script>
    $(function () {
        $.material.init(),
                $("#toggleMenu,.body-cover").click(function () {
                    $(".left-menu-box").toggleClass("active"),
                            $(".body-cover").toggle()
                })
    });
    var toggleCategory = function () {
                $(".category-btn").click(function () {
                    $(this).hasClass("active") || $(".category-btn").removeClass("active").next().removeClass("active"),
                            $(this).toggleClass("active").next().toggleClass("active")
                })
            }
            , activateSide = function () {
                var t = location.pathname
                        , e = ["going", "done", "setting"];
                for (var a in e)
                    if (t.indexOf(e[a]) > -1) {
                        $('.menu-list [data-path="' + e[a] + '"]').addClass("active");
                        break
                    }
            }
            ;
    $(function () {
        toggleCategory(),
                activateSide()
    });
    var getMoreList = function () {
                $(".check-more").click(function () {
                    var t = $(this);
                    return "true" == t.attr("data-loading") ? !1 : (t.attr("data-loading", "true").html('<i class="material-icons loading">refresh</i>'),
                            void setTimeout(function () {
                                var e = ['<li class="fu-item">', '<a href="javascript:;" class="fu-item-link">', '<div class="info-box">', '<div class="face">', '<img src="http://placeholder.duapp.com/40/40">', "</div>", '<div class="name-box">', '<p class="name">任娇</p>', '<p class="type">鼾症术后评估</p>', "</div>", "</div>", '<div class="time-box">', '<p class="date">今天</p>', '<p class="after-treat">治疗后3周</p>', "</div>", "</a>", "</li>"].join("");
                                $("#moreListBox").append(e + e + e + e),
                                        t.attr("data-loading", "false").text("查看更多随访计划"),
                                        $("html,body").animate({
                                            scrollTop: $("body").scrollTop() + 6 * $(".fu-item").height()
                                        }, 1e3)
                            }, 800))
                })
            }
            , operateBtn = function () {
                $(".operate-box .main-btn,.operate-cover").click(function () {
                    $(".operate-box").toggleClass("active"),
                            $(".operate-cover").toggle()
                })
            }
            , addFollowPlan = function () {
                $("#addFollowPlan").click(function () {
                    $("#addFollowModal").modal(),
                            $(".operate-box").toggleClass("active"),
                            $(".operate-cover").toggle()
                })
            };
    $(function () {
        getMoreList(),
                operateBtn(),
                addFollowPlan()
    });
</script>
</body>
</html>